<!-- 欢迎区域 -->
<div class="row mb-5">
    <div class="col-12">
        <div class="feature-card glass-effect">
            <div class="card-body text-center">
                <div class="mb-4">
                    <i class="fas fa-rocket fa-4x text-primary mb-3" style="background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;"></i>
                    <h2 class="fw-bold mb-3 gradient-text">欢迎使用 Express TypeScript API 测试中心</h2>
                    <p class="lead text-muted">完整的API功能测试平台，让开发和测试变得简单高效</p>
                </div>
                
                <div class="row g-4">
                    <div class="col-md-3">
                        <div class="text-center glass-effect">
                            <div class="bg-primary bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-bolt text-white fa-xl icon-float"></i>
                            </div>
                            <h6 class="fw-semibold gradient-text">高性能</h6>
                            <small class="text-muted">基于Express和TypeScript构建</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center glass-effect">
                            <div class="bg-success bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-shield-alt text-white fa-xl icon-bounce"></i>
                            </div>
                            <h6 class="fw-semibold gradient-text">安全可靠</h6>
                            <small class="text-muted">JWT认证和OAuth2.0支持</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center glass-effect">
                            <div class="bg-warning bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-credit-card text-white fa-xl icon-rotate"></i>
                            </div>
                            <h6 class="fw-semibold gradient-text">支付集成</h6>
                            <small class="text-muted">完整的Stripe支付解决方案</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center glass-effect">
                            <div class="bg-info bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-cogs text-white fa-xl icon-float"></i>
                            </div>
                            <h6 class="fw-semibold gradient-text">完整API</h6>
                            <small class="text-muted">RESTful API和Swagger文档</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 服务器状态仪表板 -->
<div class="row mb-5">
    <div class="col-12">
        <div class="feature-card glass-effect">
            <div class="card-body">
                <div class="d-flex align-items-center mb-4">
                    <div class="bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px; background: var(--primary-gradient);">
                        <i class="fas fa-server text-white"></i>
                    </div>
                    <div>
                        <h5 class="card-title mb-1 gradient-text">服务器状态仪表板</h5>
                        <p class="text-muted mb-0">实时监控服务器运行状态和系统信息</p>
                    </div>
                </div>
                
                <div class="row g-4">
                    <div class="col-md-3">
                        <div class="d-flex align-items-center p-3 bg-light rounded-3">
                            <div class="bg-success bg-gradient rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="fas fa-globe text-white"></i>
                            </div>
                            <div>
                                <div class="fw-semibold text-truncate"><%= serverInfo.baseUrl %></div>
                                <small class="text-muted">服务器地址</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex align-items-center p-3 bg-light rounded-3">
                            <div class="bg-info bg-gradient rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="fas fa-layer-group text-white"></i>
                            </div>
                            <div>
                                <div class="fw-semibold"><%= serverInfo.environment %></div>
                                <small class="text-muted">运行环境</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex align-items-center p-3 bg-light rounded-3">
                            <div class="bg-warning bg-gradient rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="fas fa-clock text-white"></i>
                            </div>
                            <div>
                                <div class="fw-semibold"><%= serverInfo.uptime %></div>
                                <small class="text-muted">运行时间</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex align-items-center p-3 bg-light rounded-3">
                            <div class="bg-secondary bg-gradient rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="fab fa-node-js text-white"></i>
                            </div>
                            <div>
                                <div class="fw-semibold"><%= process.version %></div>
                                <small class="text-muted">Node.js版本</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="/health" class="btn btn-outline-primary btn-custom me-2" target="_blank">
                        <i class="fas fa-heartbeat me-2"></i>详细健康检查
                    </a>
                    <a href="/api-docs/" class="btn btn-primary btn-custom" target="_blank">
                        <i class="fas fa-book me-2"></i>浏览API文档
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 功能测试模块 -->
<div class="row mb-5">
    <div class="col-12 mb-4">
        <div class="text-center">
            <h3 class="fw-bold">功能测试模块</h3>
            <p class="text-muted">选择下方模块开始测试API功能</p>
        </div>
    </div>
    
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="feature-card h-100">
            <div class="card-body text-center position-relative">
                <div class="position-absolute top-0 end-0 m-3">
                    <span class="badge bg-success rounded-pill">推荐</span>
                </div>
                <div class="mb-4">
                    <div class="bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px; background: var(--primary-gradient);">
                        <i class="fas fa-code fa-2x text-white"></i>
                    </div>
                </div>
                <h5 class="card-title fw-bold">API 端点测试</h5>
                <p class="card-text text-muted mb-4">
                    交互式API测试工具，支持所有HTTP方法，实时查看请求响应，JSON格式验证
                </p>
                <div class="d-grid">
                    <a href="/test/api" class="btn btn-primary btn-custom">
                        <i class="fas fa-play me-2"></i>开始API测试
                    </a>
                </div>
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-check-circle text-success me-1"></i>
                        支持GET、POST、PUT、DELETE方法
                    </small>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="feature-card h-100">
            <div class="card-body text-center">
                <div class="mb-4">
                    <div class="bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px; background: var(--success-gradient);">
                        <i class="fas fa-shield-alt fa-2x text-white"></i>
                    </div>
                </div>
                <h5 class="card-title fw-bold">认证系统测试</h5>
                <p class="card-text text-muted mb-4">
                    完整的认证流程测试，包括本地注册登录、Google OAuth和JWT令牌管理
                </p>
                <div class="d-grid">
                    <a href="/test/auth" class="btn btn-success btn-custom">
                        <i class="fas fa-sign-in-alt me-2"></i>认证功能测试
                    </a>
                </div>
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-check-circle text-success me-1"></i>
                        JWT + OAuth 2.0双重认证
                    </small>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="feature-card h-100">
            <div class="card-body text-center">
                <div class="mb-4">
                    <div class="bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px; background: var(--warning-gradient);">
                        <i class="fas fa-credit-card fa-2x text-white"></i>
                    </div>
                </div>
                <h5 class="card-title fw-bold">支付功能测试</h5>
                <p class="card-text text-muted mb-4">
                    Stripe支付集成测试，包括支付意图、订阅管理和支付历史查询
                </p>
                <div class="d-grid">
                    <a href="/test/payments" class="btn btn-warning btn-custom">
                        <i class="fas fa-dollar-sign me-2"></i>支付功能测试
                    </a>
                </div>
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-check-circle text-success me-1"></i>
                        Stripe完整支付解决方案
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- API端点快速访问 -->
<div class="row mb-5">
    <div class="col-12">
        <div class="feature-card glass-effect">
            <div class="card-body">
                <div class="d-flex align-items-center mb-4">
                    <div class="bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px; background: var(--secondary-gradient);">
                        <i class="fas fa-link text-white"></i>
                    </div>
                    <div>
                        <h5 class="card-title mb-1">API端点快速访问</h5>
                        <p class="text-muted mb-0">点击下方链接直接访问常用API端点</p>
                    </div>
                </div>
                
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="api-endpoint">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <strong class="text-primary">健康检查</strong>
                                    <div class="small text-muted mt-1">GET /health</div>
                                </div>
                                <div>
                                    <a href="/health" target="_blank" class="btn btn-sm btn-outline-primary btn-custom">
                                        <i class="fas fa-external-link-alt me-1"></i>访问
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="api-endpoint">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <strong class="text-primary">认证配置</strong>
                                    <div class="small text-muted mt-1">GET /api/v1/auth/config</div>
                                </div>
                                <div>
                                    <a href="/api/v1/auth/config" target="_blank" class="btn btn-sm btn-outline-primary btn-custom">
                                        <i class="fas fa-external-link-alt me-1"></i>访问
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="api-endpoint">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <strong class="text-primary">用户列表</strong>
                                    <div class="small text-muted mt-1">GET /api/v1/users</div>
                                </div>
                                <div>
                                    <a href="/api/v1/users" target="_blank" class="btn btn-sm btn-outline-primary btn-custom">
                                        <i class="fas fa-external-link-alt me-1"></i>访问
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="api-endpoint">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <strong class="text-primary">支付配置</strong>
                                    <div class="small text-muted mt-1">GET /api/v1/payments/config</div>
                                </div>
                                <div>
                                    <a href="/api/v1/payments/config" target="_blank" class="btn btn-sm btn-outline-primary btn-custom">
                                        <i class="fas fa-external-link-alt me-1"></i>访问
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="api-endpoint">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <strong class="text-primary">文章列表</strong>
                                    <div class="small text-muted mt-1">GET /api/v1/posts</div>
                                </div>
                                <div>
                                    <span class="badge bg-warning text-dark me-2">404</span>
                                    <a href="/api/v1/posts" target="_blank" class="btn btn-sm btn-outline-secondary btn-custom disabled">
                                        <i class="fas fa-external-link-alt me-1"></i>暂未实现
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="api-endpoint">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <strong class="text-primary">API文档</strong>
                                    <div class="small text-muted mt-1">GET /api-docs/</div>
                                </div>
                                <div>
                                    <a href="/api-docs/" target="_blank" class="btn btn-sm btn-outline-primary btn-custom">
                                        <i class="fas fa-external-link-alt me-1"></i>访问
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 实时API状态监控 -->
<div class="row">
    <div class="col-12">
        <div class="feature-card glass-effect">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px; background: var(--success-gradient);">
                            <i class="fas fa-chart-line text-white"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">实时API状态监控</h5>
                            <p class="text-muted mb-0">监控各个API端点的运行状态和响应时间</p>
                        </div>
                    </div>
                    <button class="btn btn-outline-secondary btn-custom" onclick="checkApiStatus()">
                        <i class="fas fa-refresh me-2"></i>刷新状态
                    </button>
                </div>
                
                <div id="api-status-container">
                    <div class="text-center py-5">
                        <div class="loading-spinner mx-auto mb-3"></div>
                        <p class="text-muted">正在检查API状态...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// API状态检查（优化版本）
async function checkApiStatus() {
    const endpoints = [
        { 
            name: '健康检查', 
            url: '/health', 
            method: 'GET',
            description: '服务器运行状态',
            color: 'success'
        },
        { 
            name: '认证配置', 
            url: '/api/v1/auth/config', 
            method: 'GET',
            description: 'OAuth和JWT配置',
            color: 'primary'
        },
        { 
            name: '支付配置', 
            url: '/api/v1/payments/config', 
            method: 'GET',
            description: 'Stripe支付配置',
            color: 'warning'
        },
        { 
            name: '用户管理', 
            url: '/api/v1/users', 
            method: 'GET',
            description: '用户数据接口',
            color: 'info'
        },
        { 
            name: '文章系统', 
            url: '/api/v1/posts', 
            method: 'GET',
            description: '内容管理接口',
            color: 'secondary'
        }
    ];
    
    const container = document.getElementById('api-status-container');
    container.innerHTML = '<div class="row g-3" id="status-grid"></div>';
    const grid = document.getElementById('status-grid');
    
    for (const endpoint of endpoints) {
        const col = document.createElement('div');
        col.className = 'col-md-6 col-lg-4';
        
        // 创建卡片
        const cardHtml = `
            <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid var(--bs-${endpoint.color}) !important;">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <h6 class="card-title mb-0 fw-semibold">${endpoint.name}</h6>
                        <div id="status-${endpoint.name.replace(/\s+/g, '')}" class="spinner-border spinner-border-sm text-${endpoint.color}" role="status">
                            <span class="visually-hidden">检查中...</span>
                        </div>
                    </div>
                    <p class="card-text small text-muted mb-2">${endpoint.description}</p>
                    <div class="d-flex align-items-center justify-content-between">
                        <code class="small">${endpoint.method} ${endpoint.url}</code>
                        <span id="time-${endpoint.name.replace(/\s+/g, '')}" class="badge bg-light text-dark">-</span>
                    </div>
                </div>
            </div>
        `;
        
        col.innerHTML = cardHtml;
        grid.appendChild(col);
        
        // 异步检查状态
        checkEndpointStatus(endpoint);
    }
}

async function checkEndpointStatus(endpoint) {
    const statusId = `status-${endpoint.name.replace(/\s+/g, '')}`;
    const timeId = `time-${endpoint.name.replace(/\s+/g, '')}`;
    const statusEl = document.getElementById(statusId);
    const timeEl = document.getElementById(timeId);
    
    const startTime = Date.now();
    
    try {
        const response = await fetch(endpoint.url);
        const endTime = Date.now();
        const responseTime = endTime - startTime;
        
        const isSuccess = response.ok;
        const statusClass = isSuccess ? 'success' : 'danger';
        const statusIcon = isSuccess ? 'check-circle' : 'times-circle';
        const statusText = isSuccess ? '正常' : `错误 ${response.status}`;
        
        statusEl.className = `fas fa-${statusIcon} text-${statusClass}`;
        statusEl.title = statusText;
        
        timeEl.textContent = `${responseTime}ms`;
        timeEl.className = `badge ${responseTime < 500 ? 'bg-success' : responseTime < 1000 ? 'bg-warning' : 'bg-danger'} text-white`;
        
    } catch (error) {
        statusEl.className = 'fas fa-exclamation-triangle text-danger';
        statusEl.title = '连接失败';
        timeEl.textContent = '超时';
        timeEl.className = 'badge bg-danger text-white';
    }
}

// 页面加载时检查API状态
document.addEventListener('DOMContentLoaded', function() {
    // 延迟加载状态检查，让页面动画先完成
    setTimeout(checkApiStatus, 500);
});

// 每60秒自动刷新一次状态
setInterval(checkApiStatus, 60000);
</script>